import React from 'react';
import { Dropdown, message, Space } from 'antd';
import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
import { useModel, history } from 'umi';
export default function HeaderDropMenu() {
  const { initialState, setInitialState } = useModel('@@initialState');
  const handleMenuClick = (e) => {
    // 退出登录
    if (e.key === '2') {
      // 清空信息
      setInitialState(null);
      window.localStorage.removeItem('useInfo');
      message.success('退出成功！');
      // 跳转页面
      history.push('/login');
    }
  };
  const items = [
    {
      label: '个人设置',
      key: '1',
      icon: <UserOutlined />,
    },
    {
      label: '退出登陆',
      key: '2',
      icon: <LogoutOutlined />,
    },
  ];
  const menuProps = {
    items,
    onClick: handleMenuClick,
  };
  return (
    <Space wrap>
      <Dropdown.Button menu={menuProps}>
        你好！{initialState?.userInfo?.username}
      </Dropdown.Button>
    </Space>
  );
}
